<template>
  <div class="home-container">
    <Layout>
      <template v-slot:menu>
        <Menu></Menu>
      </template>
      <template v-slot:top>
        <Head></Head>
      </template>
      <template v-slot:bottom>
        <div class="router" ref="routerRef" >
          <router-view v-slot="{ Component }" :routerDom="routerRef">
            <transition name="fade" mode="out-in">
              <component :is="Component"  />
            </transition>
          </router-view>
        </div>
      </template>
    </Layout>
  </div>
</template>

<script setup>
import Layout from "@/components/Layout/index.vue";
import Menu from "./components/Menu/index.vue";
import Head from "./components/Head/index.vue";
import { ref } from "vue";
const routerRef = ref();
</script>

<style lang="less" scoped>
@import "@/styles/mixin.less";
.home-container {
  width: 100%;
  height: 100vh;
  .router {
    width: 100%;
    height: 100%;
    padding: 0 30px;
    overflow: auto;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>